<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <form action="#">
        用户名：<input name="username" type="text" v-model="form.username"> <br><br>
        密码：<input name="password" type="text" v-model="form.password"> <br><br>
        性别：
        男：<input type="radio" name="sex" value="man" v-model="form.sex">
        女：<input type="radio" name="sex" value="woman" v-model="form.sex"> <br><br>
        爱好：
        篮球：<input type="checkbox" value="ball1"  v-model="form.hobby" >
        羽毛球：<input type="checkbox" value="ball2" v-model="form.hobby" >
        乒乓球：<input type="checkbox" value="ball3" v-model="form.hobby" ><br><br>
        所选校区：
        <select v-model="form.school">
            <option value="">请选择校区</option>
            <option value="0">广州</option>
            <option value="1">成都</option>
            <option value="2">沈阳</option>
        </select><br><br>
        我同意: <input type="checkbox" name="aggree" v-model="form.aggree"><br><br>

    </form>
    <button @click="btn">提交</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#root",
        data: {
            form : {
                username: "",
                password: "",
                sex: "",
                hobby: [],
                school: "",
                aggree: ""
            }
        },
        methods: {
            btn(){
                console.log(this.form);
            }
        },
    })
</script>
</html>
